import { ProForm, ProFormTextArea } from '@ant-design/pro-components';
import {
  Button,
  Card,
  Col,
  Drawer,
  Modal,
  Popconfirm,
  Row,
  Space,
  Table,
  Tabs,
  TabsProps,
  message,
} from 'antd';
import Meta from 'antd/es/card/Meta';
import React, { useState } from 'react';
import CreateForm from './CreateForm';

interface Shop {
  citiesBlacklist?: string;
  citiesWhitelist?: string;
  createTime?: string;
  createUser?: string;
  description?: string;

  equityVOList?: [{ type: number; cashPrice?: number; pointPrice?: number }];
  exchangeAmount?: number;
  //兑换上限
  exchangeCap?: number;
  express?: string;
  id?: number;
  imageUrl?: string;
  offlineTime?: string;
  onlineTime?: string;
  serviceGuarantee?: string;
  shopName: string;
  shopPrice?: number;
  status?: number;
  stock?: number;
  supplierName?: string;
  supplierPhone?: string;
  typeName?: string;
  updateTime?: string;
}
//方法类型
interface CreateProductFormProps {
  modalVisible: boolean;
  onCancel: () => void;
  product: Shop;
  // onSubmit: (values: any) => void;
}

const DetailForm: React.FC<CreateProductFormProps> = ({
  modalVisible,
  onCancel,
  product,
}) => {
  // 使用useState钩子函数来管理Modal的显示状态
  const [isModalOpen, setIsModalOpen] = useState(false);
  //控制驳回modal的显示
  const [rejectModalVisible, setRejectModalVisible] = useState(false);
  // 控制modal显示的函数
  const handleOpenModal = () => {
    setIsModalOpen(true);
  };

  // 控制modal关闭的函数
  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  const getStatusText = (status: any) => {
    switch (status) {
      case 0:
        return '上线';
      case 1:
        return '下线';
      case 2:
        return '草稿';
      case 3:
        return '待审核';
      case 4:
        return '审核通过';
      case 5:
        return '审核驳回';
      default:
        return '未知状态';
    }
  };
  // Mock data for demonstration
  const productFake = {
    tableData: [
      {
        id: 1,
        status: '状态1',
        time: '时间1',
        remark: '备注1',
        operator: '操作人1',
      },
      {
        id: 2,
        status: '状态2',
        time: '时间2',
        remark: '备注2',
        operator: '操作人2',
      },
      {
        id: 3,
        status: '状态2',
        time: '时间2',
        remark: '备注2',
        operator: '操作人2',
      },
      {
        id: 4,
        status: '状态2',
        time: '时间2',
        remark: '备注2',
        operator: '操作人2',
      },
      {
        id: 5,
        status: '状态2',
        time: '时间2',
        remark: '备注2',
        operator: '操作人2',
      },
      {
        id: 6,
        status: '状态2',
        time: '时间2',
        remark: '备注2',
        operator: '操作人2',
      },
      {
        id: 7,
        status: '状态2',
        time: '时间2',
        remark: '备注2',
        operator: '操作人2',
      },
      {
        id: 8,
        status: '状态2',
        time: '时间2',
        remark: '备注2',
        operator: '操作人2',
      },
    ],
  };
  //操作列表的假数据
  const columns = [
    { title: 'ID', dataIndex: 'id', key: 'id' },
    { title: '状态', dataIndex: 'status', key: 'status' },
    { title: '操作时间', dataIndex: 'time', key: 'time' },
    { title: '备注', dataIndex: 'remark', key: 'remark' },
    { title: '操作人', dataIndex: 'operator', key: 'operator' },
  ];

  const [isOnline, setIsOnline] = useState(false); // 初始状态为下线
  //上下线按钮的二次气泡确认框
  const handleOnlineOffline = () => {
    // 显示确认框进行二次确认
    if (isOnline) {
      // 如果当前是上线状态，点击时要下线
      // eslint-disable-next-line @typescript-eslint/no-use-before-define
      showConfirm('确认要下线吗？', '下线成功');
    } else {
      // 如果当前是下线状态，点击时要上线
      // eslint-disable-next-line @typescript-eslint/no-use-before-define
      showConfirm('确认要上线吗？', '上线成功');
    }
  };
  //上下线二次气泡确认框的回调
  const showConfirm = (confirmText: string, successMessage: string) => {
    // Ant Design的Popconfirm确认框
    const key = 'updatable';
    message.loading({ content: '操作中...', key });

    setTimeout(() => {
      //在这里发请求，切换button样式
      setIsOnline(!isOnline); // 切换状态
      message.success({ content: successMessage, key, duration: 2 });
    }, 1000);
  };
  //审核通过的回调
  const handlePassAudit = () => {
    // 审核通过逻辑
    message.success('审核通过成功');
  };
  // 审核驳回的回调
  const handleRejectAudit = (values: any) => {
    // 在这里处理审核驳回的逻辑，values 包含表单提交的数据
    // rejectApprovalUsingPost1(vaues)
    console.log('驳回原因:', values.rejectReason);
    message.success('已驳回审核');
    setRejectModalVisible(false); // 关闭驳回模态框
  };
  //关闭和打开审核驳回modal
  const showRejectModal = () => {
    setRejectModalVisible(true);
  };
  const handleCancel = () => {
    setRejectModalVisible(false);
  };

  //tabs组件
  const tabItems: TabsProps['items'] = [
    {
      key: '1',
      label: '基本信息',
      children: (
        <div>
          <h3 style={{ fontWeight: 'bold' }}>商品详情</h3>
          <Row gutter={[16, 16]}>
            <Col span={8}>
              <p>商品名称: {product?.shopName}</p>
            </Col>
            {/* <Col span={8}>
                <p>权益类型: {product.equityType}</p>
              </Col> */}
            <Col span={8}>
              <p>商品描述: {product?.description}</p>
            </Col>
            <Col span={8}>
              <p>商品类型: {product?.typeName}</p>
            </Col>
            <Col span={8}>
              <p>服务保障: {product?.serviceGuarantee}</p>
            </Col>
            <Col span={8}>
              <p>兑换限制: {product?.exchangeAmount}</p>
            </Col>
            <Col span={8}>
              <p>创建时间: {product?.createTime}</p>
            </Col>
            <Col span={8}>
              <p>修改时间: {product?.updateTime}</p>
            </Col>
            <Col span={8}>
              <p>上线时间: {product?.onlineTime}</p>
            </Col>
            <Col span={8}>
              <p>下线时间: {product?.offlineTime}</p>
            </Col>
          </Row>
          <div>
            <h3 style={{ fontWeight: 'bold' }}>商品图片</h3>
            <img
              src={product?.imageUrl}
              alt="商品图片"
              style={{ width: 200, height: 'auto' }}
            />
          </div>
          <div>
            <h3 style={{ fontWeight: 'bold' }}>投放城市</h3>
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <p>城市白名单: {product?.citiesWhitelist}</p>
              </Col>
              <Col span={12}>
                <p>城市黑名单: {product?.citiesBlacklist}</p>
              </Col>
            </Row>
          </div>
          <div>
            <h3 style={{ fontWeight: 'bold' }}>供应商信息</h3>
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <p>供应商名称: {product?.supplierName}</p>
              </Col>
              <Col span={12}>
                <p>供应商联系方式: {product?.supplierPhone}</p>
              </Col>
            </Row>
          </div>
        </div>
      ),
    },
    {
      key: '2',
      label: '商品预览',
      children: (
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <Card
            hoverable
            style={{ width: 240, marginTop: 30 }}
            cover={<img alt="example" src={product?.imageUrl} />}
          >
            <Meta
              title={product?.shopName}
              description={product?.description}
            />
          </Card>
          <Card
            hoverable
            style={{ width: 240, marginTop: 30 }}
            cover={<img alt="example" src={product?.imageUrl} />}
          >
            <Meta
              title={product?.shopName}
              description={product?.description}
            />
          </Card>
          <Card
            hoverable
            style={{ width: 240, marginTop: 30 }}
            cover={<img alt="example" src={product?.imageUrl} />}
          >
            <Meta
              title={product?.shopName}
              description={product?.description}
            />
          </Card>
        </div>
      ),
    },
  ];

  return (
    <Drawer
      className="detail111"
      title="商品详情"
      open={modalVisible}
      onClose={onCancel}
      footer={null}
      width={1000} // 设置合适的宽度
    >
      <Row gutter={16}>
        <Col span={12} style={{ marginBottom: 20 }}>
          <p>商品名称: {product?.shopName}</p>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={6}>
          <p>管理人: {product?.createUser}</p>
        </Col>
        <Col span={6} push={2}>
          <p>
            商品状态:{' '}
            <span style={{ fontWeight: 'bold', fontSize: '18px' }}>
              {getStatusText(product?.status)}
            </span>
          </p>
        </Col>
        <Col span={24} push={14}>
          <Space>
            <Button type="primary" onClick={handleOpenModal}>
              编辑
            </Button>
            <Popconfirm
              title="确定要审核通过吗？"
              onConfirm={handlePassAudit}
              okText="确定"
              cancelText="取消"
            >
              <Button type="primary">审核通过</Button>
            </Popconfirm>

            <Button type="primary" danger onClick={showRejectModal}>
              审核驳回
            </Button>
            <Modal
              title="审核驳回"
              open={rejectModalVisible}
              onCancel={handleCancel}
              footer={null}
            >
              <ProForm
                onFinish={handleRejectAudit}
                submitter={{
                  render: (_: any, dom: any[]) => dom,
                }}
              >
                <ProFormTextArea
                  name="rejectReason"
                  label="驳回原因"
                  placeholder="请输入驳回原因(不超过100字)"
                  rules={[
                    { required: true, message: '请输入驳回原因' },
                    { max: 100, message: '驳回原因不能超过100个字' },
                  ]}
                />
              </ProForm>
            </Modal>
            <Popconfirm
              title={isOnline ? '确认要下线吗？' : '确认要上线吗？'}
              onConfirm={handleOnlineOffline}
              okText="确认"
              cancelText="取消"
            >
              <Button type={isOnline ? 'default' : 'primary'}>
                {isOnline ? '下线' : '上线'}
              </Button>
            </Popconfirm>
          </Space>
        </Col>
      </Row>

      <div style={{ height: 700 }}>
        <Tabs defaultActiveKey="1" items={tabItems} />
      </div>

      <Table
        columns={columns}
        dataSource={productFake.tableData}
        rowKey="id"
        pagination={{
          pageSize: 5,
        }}
      />
      <CreateForm modalVisible={isModalOpen} onCancel={handleCloseModal} />
    </Drawer>
  );
};

export default DetailForm;
